<template>
    <div>
        <ul class=nav-list> 
                <li @click="switchTo('/course')">
                      <img :src="$route.path.includes('/course') ? tabBarImgArr[0].selected : tabBarImgArr[0].normal" alt="课程">
                      <p :class="{on:$route.path.includes('/course')}">课程</p>
                </li>
            
                <li @click="switchTo('/updata')">
                    <img :src="$route.path.includes('/updata') ? tabBarImgArr[2].selected : tabBarImgArr[2].normal" alt="上传资料">
                    <p :class="{on:$route.path.includes('/updata')}">上传材料</p>
                </li>
                <li @click="switchTo('/datacheck')">
                    <img :src="$route.path.includes('/datacheck') ? tabBarImgArr[3].selected : tabBarImgArr[3].normal" alt="数据查看">
                    <p :class="{on:$route.path.includes('/datacheck')}">数据查看</p>
                </li>
                <li @click="switchTo('/editpwd')">
                    <img :src="$route.path.includes('/editpwd') ? tabBarImgArr[1].selected : tabBarImgArr[1].normal" alt="密码修改">
                    <p :class="{on:$route.path.includes('/editpwd')}">密码修改</p>
                </li>
             
            </ul> 
    </div>
</template>
<script>
export default {
    data(){
        return{
            tabBarImgArr:[   //图片切换
                            {normal: require('../../assets/web/course-1.png'), selected: require('../../assets/web/course.png')},
                            {normal: require('../../assets/web/pass-1.png'), selected: require('../../assets/web/pass.png')},
                            {normal: require('../../assets/web/up-1.png'), selected: require('../../assets/web/up.png')},
                            {normal: require('../../assets/web/data-1.png'), selected: require('../../assets/web/data.png')},
                        ]
        }
        
    },
    methods:{
    switchTo(path){
      //console.log(this.$router)
      this.$router.replace("/selectCourse" + path)
    },
  },
}
</script>
<style scoped>
ul,li{
    margin:0;
    padding:0;
    list-style: none;
}
.nav-list li{
    box-sizing: border-box;
    cursor: pointer;
    height: 80px;
    line-height: 40px;
    /* padding-top: 20px; */
    padding-bottom: 7px;
}
.nav-list li:hover{
    border-bottom:2px solid #64a4f6;
}
.nav-list li p{
    padding-left: 22px;
    color:white;
    font-size: 20px;
    display: inline-block;
}
a{
    text-decoration: none;
    color:black;
}
.nav-list{
    margin-top: 20px;
}
.nav-list img{
    width:42px;
    height: 42px;
    vertical-align: middle;
}
.selectcolor{
    color:blue;
}
.on{
    color:#64a4f6 !important;
}

</style>


